<template>
  <div>
    <el-cascader
      v-if="panel"
      :key="requestTime"
      ref="areaNames"
      v-model="disValue"
      :options="province"
      :props="props"
      :collapse-tags="collapseTags"
      clearable
      :style="{width: width + 'px'}"
      :filterable="true"
      :disabled="disabled"
      :show-all-levels="showAllLevels"
      @change="handleChange"
      @expand-change="handleNode"
    />

    <el-cascader-panel
      v-else
      :key="requestTime"
      v-model="disValue"
      :options="province"
      :props="props"
      :collapse-tags="collapseTags"
      :show-all-levels="showAllLevels"
      clearable
      :disabled="disabled"
      :filterable="true"
      @change="handleChange"
      @expand-change="handleNode"
    />

  </div>
</template>

<script>
import { getDistricts, getSubDistricts } from '@/api/common/common'

export default {
  name: 'DistrictPicker',
  props: {
    value: {
      type: [String, Array, Number],
      default: _ => []
    },
    width: {
      type: [Number, String],
      default: 280
    },
    multiple: {
      type: Boolean,
      default: false
    },
    checkStrictly: {
      type: Boolean,
      default: false
    },
    panel: {
      type: Boolean,
      default: true
    },
    collapseTags: {
      type: Boolean,
      default: true
    },
    showAllLevels: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      requestTime: 0,
      province: [],
      props: {
        label: 'strdistrictname',
        value: 'lngdistrictid',
        children: 'children',
        multiple: this.multiple,
        collapseTags: false,
        checkStrictly: this.checkStrictly
      },
      areaNames: ''
    }
  },
  computed: {
    disValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  created() {
    this.getProvince()
  },
  methods: {
    handleNode(val) {
      if (val.length === 1) {
        this.getCities(val[0])
      }
      if (val.length === 2) {
        this.getCounties(val[0], val[1])
      }
    },
    /**
     * 获取区县
     * @param {Number} province
     * @param {Number} city
     */
    getCounties(province, city) {
      getSubDistricts(city).then(res => {
        if (res.code === 20000) {
          this.province.forEach((item, index) => {
            //  省级id是否相等
            if (item.lngdistrictid === province) {
              item.children.forEach((e, j) => {
                // 市级id 是否相等
                if (e.lngdistrictid === city) {
                  e.children = res.data
                  this.$emit('areaInfo', res.data)
                }
              })
            }
          })
        }
      })
    },
    /**
     * 获取城市
     * @param {Number} province
     */
    getCities(province) {
      getSubDistricts(province).then(res => {
        if (res.code === 20000) {
          res.data.forEach(item => {
            this.$set(item, 'children', [])
          })
          this.province.forEach((item, index) => {
            if (item.lngdistrictid === province) {
              this.$set(this.province[index], 'children', res.data)
            }
          })
        }
      })
    },
    /**
     * 获取省
     */
    getProvince() {
      getDistricts(1).then(res => {
        if (res.code === 20000) {
          ++this.requestTime
          this.province = res.data
          this.province.forEach(item => {
            this.$set(item, 'children', [])
          })
        }
      })
    },
    handleChange(val) {
      this.$emit('change', val)
      this.$nextTick(() => {
        this.areaNames = this.$refs['areaNames'].presentText
      })
    }
  }
}
</script>

<style scoped>

</style>
